<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伙伴</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<!--头部-->
		<div class="container">
			<div class="header">
				<span class="bar"></span>
					<div class="hgroup">
					<div class="layout clear">
						<div class="logo fl" >
							<a href="">
								<img src="img/logo.png" alt="">
							</a>			
						</div>
						<div class="nav fr">
							<ul>
								<li><a href="index.html">首页</a></li>
								<li><a href="about.html">关于</a></li>
								<li><a href="news.html">新闻</a></li>
								<li><a href="field.html">领域</a></li>
								<li><a href="case.html">案例</a></li>
								<li><a href="honor.html">荣誉</a></li>
								<li><a href="service.html">服务</a></li>
								<li class="on"><a href="partner.html">伙伴</a></li>
								<li><a href="contact.html">联系</a></li>
							</ul>
						</div>    
				    </div>
			    </div>   
			</div>
		</div>
		<!--背景-->
		<div class="top-warp">
		   	<div class="bg-color">
		   		<div class="top-nav clear">
		   			<a href="partner.html" class="tit fl">合作伙伴</a>
		   		</div>
		   	</div>
		   <div class="top-bg new info">
		   	<h1>成就客户&nbsp;<span class="">.</span>&nbsp;互赢互利 </h1>
		   </div>
		</div>
		<!--内容-->
		<div class="layout">
			<div class="vertical">
				<div class="brand">
					<a href="http://www.vanke.com/">
						<img src="img/图层 19.png" />
						<div class="info">万科</div>
					</a>
					<a href="http://www.bgy.com.cn/">
						<img src="img/图层 20.png"/>
						<div class="info">碧桂园</div>
					</a>
					<a href="http://www.tencent.com/">
						<img src="img/图层 10.png"/>
						<div class="info">腾讯</div>
					</a>
					<a href="https://www.tmall.com/">
			 	     	<img src="img/天猫.png"/>
		 	     		<div class="info">天猫</div>
		 	     	</a>
			 	  	<a href="http://www.jd.com/">
			 	     	<img src="img/京东.png"/>
		 	     		<div class="info">京东</div>
			 	    </a>
				</div>
				<div class="brand mt30">
					<a href="http://www.gome.com.cn/">
		 	     			<img src="img/国美.png"/>
		 	     			<div class="info">国美电器</div>
		 	     		</a>
			 	     	<a href="http://www.suning.com/">
			 	     		<img src="img/苏宁.png"/>
		 	     			<div class="info">苏宁易购</div>
			 	     	</a>
			 	     	<a href="http://www.mi.com/index.html">
			 	     		<img src="img/小米.png"/>
		 	     			<div class="info">小米</div>
			 	     	</a>
			 	     	<a href="http://www.meizu.com/">
			 	     		<img src="img/魅族.png"/>
		 	     			<div class="info">魅族</div>
			 	     	</a>
			 	     	<a href="http://www.huawei.com/cn/">
			 	     		<img src="img/华为.png"/>
		 	     			<div class="info">华为</div>
			 	     	</a>
				</div>			
		 	   <div id="more" class="hide list mt30">
		 	     	<div class="brand mt30">
					<a href="http://www.gome.com.cn/">
		 	     			<img src="img/国美.png"/>
		 	     			<div class="info">国美电器</div>
		 	     		</a>
			 	     	<a href="http://www.suning.com/">
			 	     		<img src="img/苏宁.png"/>
		 	     			<div class="info">苏宁易购</div>
			 	     	</a>
			 	     	<a href="http://www.mi.com/index.html">
			 	     		<img src="img/小米.png"/>
		 	     			<div class="info">小米</div>
			 	     	</a>
			 	     	<a href="http://www.meizu.com/">
			 	     		<img src="img/魅族.png"/>
		 	     			<div class="info">魅族</div>
			 	     	</a>
			 	     	<a href="http://www.huawei.com/cn/">
			 	     		<img src="img/华为.png"/>
		 	     			<div class="info">华为</div>
			 	     	</a>
				</div>
				<div class="brand mt30">
					<a href="http://www.gome.com.cn/">
		 	     			<img src="img/国美.png"/>
		 	     			<div class="info">国美电器</div>
		 	     		</a>
			 	     	<a href="http://www.suning.com/">
			 	     		<img src="img/苏宁.png"/>
		 	     			<div class="info">苏宁易购</div>
			 	     	</a>
			 	     	<a href="http://www.mi.com/index.html">
			 	     		<img src="img/小米.png"/>
		 	     			<div class="info">小米</div>
			 	     	</a>
			 	     	<a href="http://www.meizu.com/">
			 	     		<img src="img/魅族.png"/>
		 	     			<div class="info">魅族</div>
			 	     	</a>
			 	     	<a href="http://www.huawei.com/cn/">
			 	     		<img src="img/华为.png"/>
		 	     			<div class="info">华为</div>
			 	     	</a>
				</div>
		 	   </div>
		 	   <div class="pub-more-btn mt50">
					<span class="tc" onclick="showHideCode()">查看更多</span>
				</div>	
			</div>
		</div>
		
		
		<!--底部-->
		<div class="footer mt50">
			<div class="layout clear">
				<div class="list fl">
					<a href="">版权申明</a><span>|</span>
					<a href="">隐私保护</a><span>|</span>
					<a href="">友情链接 </a><span>|</span>
					<a href="news.html">新闻中心</a><span>|</span>
					<a href="contact.html">联系我们</a>
				</div>
				<div class="link fr">
					<span>名邸装饰版权所有</span>
					<a href=""><img src="img/weibo.png"/></a>
					<a href=""><img src="img/weixin.png"/></a>
					<a href=""><img src="img/qq.png"/></a>
				</div>
			</div>
		</div>
		 <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		   function showHideCode(){
		             $("#more").toggle();
		          }
		   
		   //图片翻转
		    var turn = function(target,time,opts){
			target.find('a').hover(function(){
				$(this).find('img').stop().animate(opts[0],time,function(){
					$(this).hide().next().show();
					$(this).next().animate(opts[1],time);
				});
			},function(){
				$(this).find('.info').animate(opts[0],time,function(){
					$(this).hide().prev().show();
					$(this).prev().animate(opts[1],time);
				});
			});
		}
		   var verticalOpts = [{'width':0},{'width':'208px'}];
			turn($('.vertical'),100,verticalOpts);
		 </script>
	</body>
</html>
